<template>
  <div class="table-height-switch">
    <el-button
      v-for="mode in modes"
      :key="mode"
      size="mini"
      :type="currentMode === mode ? 'primary' : 'default'"
      @click="changeMode(mode)"
    >
      {{ mode }}
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'TableHeightSwitch',
  props: {
    value: {
      type: String,
      default: '500px' // ✅ 默认就是矮
    },
    localStorageKey: {
      type: String,
      default: 'tableHeightMode'
    }
  },
  data() {
    return {
      currentMode: '矮',
      modes: ['矮', '中', '高']
    }
  },
  watch: {
    value(val) {
      this.syncModeFromHeight(val)
    }
  },
  mounted() {
    const saved = localStorage.getItem(this.localStorageKey)
    if (saved && this.modes.includes(saved)) {
      this.syncModeFromHeight(this.modeToHeight(saved))
    } else {
      this.syncModeFromHeight(this.value)
    }
  },
  methods: {
    syncModeFromHeight(height) {
      if (height === '500px') {
        this.currentMode = '矮'
      } else if (height === '800px') {
        this.currentMode = '中'
      } else {
        this.currentMode = '高'
      }
    },
    modeToHeight(mode) {
      if (mode === '矮') return '500px'
      else if (mode === '中') return '800px'
      else return '1200px'
    },
    changeMode(mode) {
      this.currentMode = mode
      localStorage.setItem(this.localStorageKey, mode)

      const height = this.modeToHeight(mode)
      this.$emit('input', height) // ✅ vue2兼容写法
    }
  }

}
</script>

<style scoped>
.table-height-switch {
  display: flex;
  align-items: center;
}
</style>
